<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="../css/normalizel.css">
  <link rel="stylesheet" href="../css/stylel.css" media="screen" type="text/css" />
</head>
<body>
  <canvas class="canvas"></canvas>
  <div class="help">?</div>

  <div class="ui">
    <input class="ui-input" type="text" />
    <span class="ui-return">↵</span>
  </div>

  <div class="overlay">
    <div class="tabs">
      <div class="tabs-labels">
        <span class="tabs-label">Commands</span>
        <span class="tabs-label">Info</span>
        <span class="tabs-label">Share</span>
      </div>

      <div class="tabs-panels">
        <ul class="tabs-panel commands">
          <li class="commands-item">
            <span class="commands-item-title">Text</span>
            <span class="commands-item-info" data-demo="Hello :)">Type anything</span>
            <span class="commands-item-action">Demo</span>
          </li>
          <li class="commands-item">
            <span class="commands-item-title">Countdown</span>
            <span class="commands-item-info" data-demo="#countdown 10">#countdown
              <span class="commands-item-mode">number</span>
            </span>
            <span class="commands-item-action">Demo</span>
          </li>
          <li class="commands-item">
            <span class="commands-item-title">Time</span>
            <span class="commands-item-info" data-demo="#time">#time</span>
            <span class="commands-item-action">Demo</span>
          </li>
          <li class="commands-item">
            <span class="commands-item-title">Rectangle</span>
            <span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle
              <span class="commands-item-mode">width x height</span>
            </span>
            <span class="commands-item-action">Demo</span>
          </li>
          <li class="commands-item">
            <span class="commands-item-title">Circle</span>
            <span class="commands-item-info" data-demo="#circle 25">#circle
              <span class="commands-item-mode">diameter</span>
            </span>
            <span class="commands-item-action">Demo</span>
          </li>

          <li class="commands-item commands-item--gap">
            <span class="commands-item-title">Animate</span>
            <span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up">
              <span class="commands-item-mode">command1</span>&nbsp;|
              <span class="commands-item-mode">command2</span>
            </span>
            <span class="commands-item-action">Demo</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <audio src="../music/Maps.mp3" autoplay="autoplay" loop="loop"></audio>
  <script src="../js/indexl.js"></script>

</body>

</html>